{{extend name="layout/base-html"}}

{{block name="body"}}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end"></div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="name" placeholder="请输入名称|编号" autocomplete="off"
                                   class="layui-input"></div>

                        <div class="layui-inline layui-show-xs-block">
                            <select name="province_id" lay-filter="province">
                                <option value="">全部省</option>
                                {{volist name="province" id="v"}}
                                <option value="{{$v.id}}">{{$v.name}}</option>
                                {{/volist}}
                            </select>
                        </div>

                        <div class="layui-inline layui-show-xs-block">
                            <select name="city_id">
                                <option value="">全部市</option>
                            </select>
                        </div>

                        <div class="layui-inline layui-show-xs-block">
                            <select name="city_type">
                                <option value="">全部类型</option>
                                {{volist name="cityType" id="v"}}
                                <option value="{{$v.value}}">{{$v.name}}</option>
                                {{/volist}}
                            </select>
                        </div>

                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="search">
                                <i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>

                <div class="layui-card-body ">
                    <table id="table" class="x-cate" lay-filter="table"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="status">
    <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="status" {{
           d.status== 1 ? 'checked' : '' }}>
</script>

<script type="module">
    import {sort, status} from "/static/admin/js/api/additional/city.js";
    import {getCityList} from "/static/admin/js/api/common/city.js";
    import {rain} from "/static/admin/js/app.js";

    layui.use(['table', 'laydate'], () => {
        let table = layui.table,
            form = layui.form,
            laydate = layui.laydate;

        // 时间筛选
        laydate.render({
            elem: "#start",
            type: "datetime"
        });

        laydate.render({
            elem: "#end",
            type: "datetime"
        });

        // 表格
        table.render({
            ...rain.config.table

            , defaultToolbar: []

            , cols: [[ //表头
                {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                , {field: 'name', title: '名称'}
                , {field: 'code', title: '编号'}
                , {field: 'typeName', title: '类型'}
                , {
                    field: 'province', title: '省', templet: d => {
                        return d.pid.province;
                    }
                }
                , {
                    field: 'city', title: '市', templet: d => {
                        return d.pid.city;
                    }
                }
                , {field: 'create_time', title: '创建时间'}
                , {field: 'sort', title: '排序', edit: 'text', align: 'center'}
                , {field: 'status', title: '状态', templet: "#status", align: 'center'}
            ]],
            id: 'table-reload',
        });

        // 初始化配置
        rain.tableAction.init = {form, table};

        // 筛选
        rain.tableAction.search('table-reload');

        //监听状态操作
        form.on('switch(status)', function (obj) {
            status(this.value, {
                status: obj.elem.checked ? 1 : 0
            }).then(res => {
                dialog(res.msg, () => {
                    // 失败则恢复选中状态
                    if (200 != res.code) {
                        obj.elem.checked = !obj.elem.checked;

                        form.render('checkbox');
                    }
                });
            });
        });

        // 监听单元格修改
        table.on('edit(table)', (obj) => {
            switch (obj.field) {
                // 排序
                case 'sort':
                    sort(obj.data.id, {sort: obj.data.sort}).then(res => {
                        dialog(res.msg);
                    });
                    break;
            }
        });

        // 选择省
        form.on('select(province)', async data => {
            let list = [];
            if (data.value !== '') {
                let res = await getCityList(data.value, 1).then(res => res);

                if (200 !== res.code) {
                    dialog(res.msg);
                } else {
                    list = res.data.list;
                }
            }

            let option = '<option value="">全部市</option>';
            list.forEach(item => {
                option += `<option value="${item.id}">${item.name}</option>`;
            });
            $('select[name="city_id"]').html(option);

            form.render('select');
        });
    });
</script>
{{/block}}
